<template>
	<div class="curveBox" @dblclick="btn">
		<div  ref="curve" :style="{width:width,height:height}"></div>
	</div>
</template>

<script>
import * as echarts from 'echarts';
import axios from 'axios';
import {getProvinceMapInfo} from '@/assets/js/map_utils.js'

export default{
	data(){
		return {
			width:'100%',
			height:'500px',
			mapData:{}
		}
	},
	computed:{
		data(){
			return this.$store.state.curConfirm
		}
	},
	watch:{
		data(newData){
			this.totalPage = Math.ceil(newData.length/5);
			this.updateChart();
		}
	},
	methods:{
		initChart(){
			this.myChart = echarts.init(this.$refs.curve,'westeros');
			this.myChart.on('click',arg=>{
				let _new = getProvinceMapInfo(arg.name);
				if(!this.mapData[_new.key]){
					axios.get('http://localhost:8080'+_new.path).then(res=>{
						
						this.mapData[_new.key]=res.data;
						echarts.registerMap(_new.key,res.data);
						this.myChart.setOption({
							series:[
								{
									type:'map',
									map:_new.key
								}
							]
						});
					})
				}else{
					this.myChart.setOption({
						series:[
							{
								type:'map',
								map:_new.key
							}
						]
					});
				}
				
				
			})
			// 获取本地数据
			axios.get('http://localhost:8080/map/china.json').then(res=>{
				// 注册中国地图
				echarts.registerMap('china',res.data);
				let initOption={
					tooltip:{
						triggerOn:'click',//提示框触发的条件
						enterable:true,//鼠标是否可进入提示框浮层中，默认为false
						formatter(item){
							return item.name+'</br>'+"确诊:"+item.data.value
						}
					},
					title:{
						text:'▋ 全国省份当前确诊病例分布图',
						textStyle:{
							color:'#fff'
						},
						left:20,
						top:20
					},
					visualMap:[{
										type:'piecewise',
										pieces:[
											{
												max:1,
												color:'#ececec'
											},
											{
												min:1,
												max:9,
												color:'#ffe5db'
											},
											{
												min:10,
												max:99,
												color:'#ff9985'
											},
											{
												min:100,
												max:999,
												color:'#f57567'
											},
											{
												min:1000,
												max:9999,
												color:'#e64546'
											},
											{
												min:10000,
												color:'#b80909'
											}
										],
										textStyle:{
											color:'#000'
										}
									}],
					series:[
						{
							type:'map',
							map:'china',
							roam:false,//是否开启鼠标缩放和平移漫游
							zoom:1.2,//当前视角的缩放比例。
							aspectScale:0.75,//这个参数用于 scale 地图的长宽比
							top:40,
							layoutCenter:['5%','5%'],//定义地图中心在屏幕中的位置
							label:{
								show:true,
								fontSize:12,
								color:'#000'
							},
							itemStyle:{
								areaColor:'rgba(255,255,255,0.6)',//地图区域的颜色。
								borderColor:'rgba(255,255,255,0.6)',//图形的描边颜色
							},
							emphasis:{//高亮状态下的多边形和标签样式。
								itemStyle:{
									areaColor:'rgba(255,180,0,0.8)',
									shadowOffsetX:0,
									shadowOffsetY:0,
									shadowBlur:10,//图形阴影的模糊大小
									borderWidth:0//描边线宽
								}
							},
						}
					]
				}
				this.myChart.setOption(initOption);
			})
			
		},
		btn(){
			this.myChart.setOption({
				series:[
					{
						type:'map',
						map:'china'
					}
				]
			});
		},
		updateChart(){
			this.myChart.setOption({
				series:[
					{
						data:this.data
					}
				]
			});
		},
		screenAdapter(){
			const offsetWidth = this.$refs.curve.offsetWidth /100*3.6;
			const adapterOption = {
			};
			this.myChart.setOption(adapterOption);
			this.myChart.resize({
				animation:{
					duration:300
				}
			})
		}
	},
	mounted() {
		this.initChart();
		this.screenAdapter();
		window.addEventListener('resize',this.screenAdapter)
	},
	beforeDestroy() {
		clearInterval(this.timer);
		window.removeEventListener('resize',this.screenAdapter);
	}
}
</script>

<style lang="less" scoped="scoped">
	.curconfirmBox{
		width: 100%;
		height: 100%;
	}
	canvas{
		border-radius: 15px;
		background-color: none !important;
	}
	.curveBox{
		margin-bottom: 1em;
		canvas{
			border-radius: 15px;
			background-color: none !important;
		}
	}
</style>
